<style lang="scss" scoped>
.goods-list {
  :deep td {
    vertical-align: top;
  }
  .list {
    text-align: left;
    padding-left: 10px;
    .el-row {
      margin-bottom: 10px;
      div {
        &:last-child {
          color: #999;
        }
      }
    }
  }
}
</style>
<template>
  <div class="goods-list">
    <!-- 查询 -->
    <el-form :inline="true" :model="form" label-width="80px" class="query-form">
      <el-col :span="8">
        <el-form-item label="准入国家">
          <el-input v-model="form.user" placeholder="输入准入国家"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="所属分类">
          <el-select v-model="form.name" placeholder="输入所属分类">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="输入搜索">
          <el-input v-model="form.user" placeholder="输入搜索"></el-input>
        </el-form-item>
      </el-col>
      <el-row class="btn" type="flex" justify="center">
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onQuery">重置</el-button>
      </el-row>
    </el-form>
    <!-- 表格列表 -->
    <table-com
      ref="table"
      api="/order/queryList"
      :column="column"
      :params="{}"
      :config="{ getList }"
      @row-click="rowClick"
    >
      <template v-slot="{ prop, row, column }">
        <div class="list">
          <template v-if="showList[row.id]">
            <el-row v-for="(item, index) in column.child" :key="index">
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
            <div v-if="prop === 'orderInfo'">
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="$router.push(`/step/order?id=${row.orderInfo.cabinetNo}`)"
                >编辑</el-button
              >
            </div>
          </template>
          <template v-else>
            <el-row
              v-for="(item, index) in column.child.slice(0, 1)"
              :key="index"
            >
              <div>{{ row[prop][item.prop] || '-' }}</div>
              <div>{{ item.label }}</div>
            </el-row>
          </template>
        </div>
      </template>
    </table-com>
  </div>
</template>

<script>

export default {
  name: 'GoodsList',
  data() {
    return {
      form: {
        user: '',
        name: ''
      },
      column: [
        {
          label: '类别',
          prop: 'orderInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '提运号', prop: 'ladingNo' },
            { label: '报关单单号', prop: 'declarationNo' },
            { label: '关税税号', prop: 'tariffNo' },
            { label: '增值税税号', prop: 'vatNo' },
            { label: '启运国', prop: 'startShipmentCountry' },
            { label: '贸易国', prop: 'tradeCountry' },
            { label: '目的国', prop: 'destCountry' }
          ]
        },
        {
          label: '类别码',
          prop: 'addressInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '货物代理人', prop: 'goodsProxy' },
            { label: '货物接收人', prop: 'goodsReceiver' },
            { label: '申报单位名称', prop: 'declareCompanyName' },
            { label: '收货单位名称', prop: 'receiveCompanyName' },
            { label: '发货单位名称', prop: 'deliverCompanyName' },
            { label: '消费单位名称', prop: 'consumeCompanyName' }
          ]
        },
        {
          label: '货品',
          prop: 'cancelVerificationInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '许可证编号', prop: 'licenseNo' }
          ]
        },
        {
          label: '准入国家',
          prop: 'settlementInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '总关税金额', prop: 'tariffAmount' },
            { label: '总增值税金额', prop: 'addValueTaxAmount' },
            { label: '总税额', prop: 'sumTaxAmount' }
          ]
        },
        {
          label: '进口税率',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        },
        {
          label: '协定税率',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        },
        {
          label: '是否常用',
          prop: 'fileInfo',
          slot: true,
          child: [
            { label: '柜号', prop: 'cabinetNo' },
            { label: '文件类型', prop: 'fileType' },
            { label: '', prop: 'fileShowName' }
          ]
        }
      ],
      importVisible: false,
      pdfVisible: false,
      showList: []
    }
  },
  methods: {
    onQuery() {
      this.$refs.table.fetch(1)
    },
    rowClick(row) {
      this.$set(this.showList, row.id, !this.showList[row.id])
    },
    getList(list) {
      list.forEach(() => {
        this.showList.push(false)
      })
    }
  },
  mounted() {
    this.onQuery()
  }
}
</script>
